import { Component, ElementRef, OnInit, Renderer2 } from '@angular/core';
import { UtilService } from 'src/app/services/util.service';
import { trigger, state, style, animate, transition } from '@angular/animations';
import { LetterService } from 'src/app/services/letter.service';
import { MemberStorageService } from 'src/app/services/member-storage.service';
import { MemberVo } from 'src/app/model/member-vo';
import { HttpErrorResponse } from '@angular/common/http';
@Component({
  selector: 'app-sent-message-form-embed',
  templateUrl: './sent-message-form-embed.component.html',
  styles: [``],
  animations: [
    trigger('octrigger', [
      state('openS', style({
        bottom: '0'
      })),
      state('closeS', style({
        bottom: '-260px'
      })),
      transition('openS => closeS', [
        animate('500ms')
      ]),
      transition('closeS => openS', [
        animate('500ms')
      ]),
    ])
  ]
})
export class SentMessageFormEmbedComponent implements OnInit {
  public curMember: MemberVo | null;
  private opened: boolean = false;
  public form:any = {
    receiver: -1,
    receiveNickname: '',
    content: '',
    token: ''
  };

  constructor(
    private elementRef: ElementRef,
    private renderer2: Renderer2,
    private letterService: LetterService,
    private memberStorage: MemberStorageService,
    private util: UtilService) {
      this.curMember = this.memberStorage.get();
  }

  ngOnInit(): void {
  }

  public toggle(receiver:number, receiveNickname:string):void{
    if(null === this.curMember){
      return this.util.alertError('您需要先登录!');
    }
    if (this.opened) {
      this.close();
    } else {
      this.open(receiver, receiveNickname);
    }
  }

  //关闭按钮
  public close(): void {
    let bdrawer: HTMLElement = this.elementRef.nativeElement;
    this.renderer2.setStyle(bdrawer.querySelector('.embed_drawer_menu'), 'bottom', '-260px');
    this.opened = false;
    //重置
    this.form.token = '';
    this.form.receiver = -1;
    this.form.receiveNickname = '';
    this.form.content = '';
  }

  //打开
  public open(receiver:number, receiveNickname:string): void{
    let bdrawer: HTMLElement = this.elementRef.nativeElement;
    this.renderer2.setStyle(bdrawer.querySelector('.embed_drawer_menu'), 'bottom', '0');
    this.opened = true;
    //赋值
    this.form.token = this.util.randomAlphaNumeric(8) || '123456';
    this.form.receiver = receiver;
    this.form.receiveNickname = receiveNickname;
  }

  //发送消息
  public sendMessage(): void{
    this.letterService.send(this.curMember?.id??0, this.curMember?.nickname??'guest', null, this.form.content, this.form.receiver).subscribe({
      next: response => {
        this.util.alertSuccess('发送成功');
      },
      error: err => {
        let em: string = '';
        if (err instanceof HttpErrorResponse) {
          if (err.error instanceof ErrorEvent) {
            em = err.error.message;
          } else {
            em = (err.status === 404) ? '发送失败' : err.error;
          }
        } else if (err instanceof Error) {
          em = err.message;
        } else { em = err; }
        this.util.alertError(em);
        console.log('[SentMessageForm-Emd]sent error ' + em);
        this.close();
      },
      complete: () => { console.log('[SentMessageForm-Emd]sent Completed'); this.close();}
    });
  }
}
